<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--用户列表卡片-->
    <el-card class="box-card">
      <el-form :inline="true" :model="employees" class="demo-form-inline">
        <el-form-item label="员工Id" label-width="70px">
          <el-input clearable v-model="employees.eId" placeholder="请输入员工Id"></el-input>
        </el-form-item>
        <el-form-item label="员工名称" label-width="70px">
          <el-input clearable v-model="employees.eName" placeholder="请输入员工名称"></el-input>
        </el-form-item>
        <el-form-item label="部门编号" label-width="70px">
          <el-input clearable v-model="employees.dNum" placeholder="请输入部门编号"></el-input>
        </el-form-item>

        <el-form-item label="职位编号" label-width="70px">
          <el-input clearable v-model="employees.pNum" placeholder="请输入职位编号"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" @click="resetEmployeesrVo">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getEmployeesListByEmployee">查询</el-button>
          <el-button type="success" icon="el-icon-plus" v-if="status" @click="showAdd">添加</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格内容显示区域-->
      <el-table
        :data="employeesList"
        border
        max-height="600"
        style="width: 100%;">
        <el-table-column type="expand" >

          <template slot-scope="scope">
            <p v-if="scope"></p>
            <el-table :data="positionAndDepartment">
              <el-table-column label="职位名称" >{{scope.row.position.pname}}</el-table-column>
              <el-table-column label="部门名称">{{scope.row.department.dName}}</el-table-column>
              <el-table-column label="职位经理">{{scope.row.department.cName}}</el-table-column>
            </el-table>
          </template>

        </el-table-column>
        <el-table-column
          prop="eId"
          label="员工编号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="eName"
          label="员工名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="dNum"
          label="部门编号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="pNum"
          label="职位编号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="card"
          label="身份证"
          width="180">
        </el-table-column>

        <el-table-column
          prop="phone"
          label="电话号码"
          width="120">
        </el-table-column>

        <el-table-column
          prop="sex"
          label="性别"
          width="80">
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="生日"
          width="150">
        </el-table-column>

        <el-table-column
          width="200"
          label="操作">
          <template slot-scope="scope">
            <span v-if="status">

            <el-button type="primary" size="mini" icon="el-icon-edit" @click.native.prevent="showUpdate(scope.row.eId)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete"
                       @click.native.prevent="deleteEmployee(scope.row.eId)"></el-button>
            <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
            </span>
            <span v-if="!status">
              无权限
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <EmployeesAdd :addVisible="addVisible" @changeShowAdd="showAdds" ref="addRef"></EmployeesAdd>
      <EmployeesUpdate :eId="updateId" :updateVisible="updateVisible" @changeShowUpdate="showUpdates" ref="UpdateRef"></EmployeesUpdate>
    </el-card>
  </div>
</template>

<script>
  import EmployeesAdd from './EmployeesAdd'
  import EmployeesUpdate from './EmployeesUpdate'

  export default {
    name: 'Employees',
    data() {
      return {
        employees: {
          eId: '',
          eName: '',
          dNum: '',
          pNum: '',
          card: '',
          phone: '',
          sex: '',
          birthday: '',
        },
        // 控制新增编辑弹窗的显示与隐藏
        addVisible: false,
        updateVisible: false,
        updateId: '',
        //用户集合
        employeesList: [],
        positionAndDepartment: [],
        //每页显示的条数
        size: 6,
        //总条数
        total: 100,
        //当前页码
        current: 1,
        status: true
      }
    },
    components: {
      EmployeesAdd,
      EmployeesUpdate
    },
    created() {
      //创建组件的时候调用查询所有用户的方法
      this.getEmployeesList()
      this.getStatus()
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      //当每页条数改变的时候
      handleSizeChange(val) {
        //将val赋值给size
        this.size = val;
        //重新去后台查询数据
        this.getEmployeesList();
      },
      //当前页码改变的时候
      handleCurrentChange(val) {
        this.current = val;
        this.getEmployeesList();
      },
      async getEmployeesList() {
        this.$axios.get("/sys/employee/search/" + this.current + "/" + this.size).then((response) => {
          console.log(response)
          this.employeesList = response.data.data.list;
          this.positionAndDepartment[0]=this.employeesList.department;
          this.positionAndDepartment[0]=this.employeesList.position;
          console.log(this.positionAndDepartment)
          this.total = response.data.data.total;
        })
      },
      getStatus() {
        this.$axios.delete("/sys/salary/" + 2010010).then((response) => {
          console.log(response.data.code);
          if (response.data.code != 20000) {
            this.status = false
          }
        });
      }
      ,
      async getEmployeesListByEmployee() {
        this.$axios.post("/sys/employee/search/" + this.current + "/" + this.size,this.employees).then((response) => {
          console.log(response)
          this.employeesList = response.data.data.list;
          this.positionAndDepartment[0]=this.employeesList.department;
          this.positionAndDepartment[0]=this.employeesList.position;
          console.log(this.positionAndDepartment)
          this.total = response.data.data.total;
        })
      },
      deleteEmployee(id) {
        this.$axios.delete("/sys/employee/"+id).then((response) => {});
        location.reload();
      },
      //重置表单
      resetEmployeesrVo() {
          this.employees.eId = '',
          this.employees.eName = '',
          this.employees.dNum = '',
          this.employees.pNum = '',
          this.employees.card = '',
          this.employees.phone = '',
          this.employees.sex = '',
          this.employees.birthday = '',
          this.getEmployeesList()
      },
      // 按钮点击事件 显示新增编辑弹窗组件
      showAdd() {
        this.addVisible = true
      },
      showUpdate(id) {
        this.updateVisible = true;
          this.updateId=id;
          console.log("id="+id);
      },
      // 监听 子组件弹窗关闭后触发，有子组件调用
      showAdds(data) {
        if (data === 'false') {
          this.addVisible = false
        } else {
          this.addVisible = true
        }
      },
      showUpdates(data) {
        if (data === 'false') {
          this.updateVisible = false
        } else {
          this.updateVisible = true
        }
      }
    }
  }
</script>

<style scoped>

</style>
